<template>
	<view class="tabBar">
		<view :class="{tabBar_item:true,active:value === i}" v-for="(item,i) in tabBarList" :key="i"
			@click="handleClick(i)">
			<view class='iconfont icon' v-html="item.iconfont"></view>
			<text class="text">{{item.text}}</text>
			<view class="dot" v-if="i === 2 && allNum">{{allNum}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				tabBarList: [{
						"pagePath": "/pages/index/index",
						"text": "首页",
						"iconfont": "&#xe71c;"
					},
					{
						"pagePath": "/pages/classification/classification",
						"text": "分类",
						"iconfont": "&#xe67c;"
					},
					{
						"pagePath": "/pages/shoppingCart/shoppingCart",
						"text": "购物车",
						"iconfont": "&#xe638;",
						info: 1
					},
					{
						"pagePath": "/pages/personalCenter/personalCenter",
						"text": "我的",
						"iconfont": "&#xe6e0;"
					},
				]
			}
		},
		computed: {
			...mapState('tabBar', ['value']),
			...mapGetters('cart', ['allNum']),
			...mapState('userInfo', ['userInfo'])
		},
		created() {
			this.$set(this.tabBarList[2], 'info', this.allNum)
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			handleClick(index) {
				this.changeValue(index)
				uni.switchTab({
					url: this.tabBarList[index].pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabBar {
		width: 100%;
		height: 50px;
		background-color: #fff;
		position: fixed;
		bottom: -3px;
		display: flex;
		justify-content: space-around;
		padding: 3px 0;
		z-index: 999;

		.tabBar_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.icon {
				font-size: 27px;
			}

			.text {
				font-size: 15px
			}

			.dot {
				width: 34rpx;
				line-height: 17px;
				text-align: center;
				background-color: red;
				color: #fff;
				position: absolute;
				font-size: 10px;
				border-radius: 50%;
				right: 5%;
				top: -5%;
			}

		}

		.active {
			color: #884E22;
		}
	}
</style>
